<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04_员工列表练习</title>
</head>
<body>
    <input type="text" id="name" placeholder="请输入员工姓名">
    <input type="text" id="salary" placeholder="请输入员工工资">
    <input  type="text" id="post" placeholder="请输入员工岗位">
    <button onclick="addEmp()">添加员工</button>
    <!--分隔线-->
    <hr>
    <table border="1" cellspacing="0" width="100%">
<!--        表头-->
        <tr>
            <th>姓名</th>
            <th>工资</th>
            <th>岗位</th>
        </tr>
    </table>
    <script>
        //定义一个数组，用来保存每一个员工对象的值
        let arr=[];
        function addEmp() {
            // 获取元素并去除首尾空格
            let nameE=document.getElementById('name').value.trim();
            let salaryE=document.getElementById('salary').value.trim();
            let postE=document.getElementById('post').value.trim();
            if (nameE==''||salaryE==''||postE=='') {
                alert('请填写完整员工信息');
                return;
            }
            console.log(nameE,salaryE,postE);
            //创建一行，然后把获取的元素，放入行内
            let trE=document.createElement('tr');//创建新的一行
            let td1E=document.createElement('td');//创建第一列
            td1E.innerText=nameE;//添加第一列内容
            let td2E=document.createElement('td');//创建第二列
            td2E.innerText=salaryE;
            let td3E=document.createElement('td');//创建第三列
            td3E.innerText=postE;
            //因为之前创建的tr和td是动态创建的，是独立的，所以需要使用appendChild方法把td放入tr中
            trE.appendChild(td1E);//添加第一列
            trE.appendChild(td2E);//添加第二列
            trE.appendChild(td3E);//添加第三列
            document.querySelector('table').appendChild(trE);//把tr放入table中
            //清空输入框的值
            document.getElementById('name').value='';
            document.getElementById('salary').value='';
            document.getElementById('post').value='';
            arr.push({
                name:nameE,
                salary:salaryE,
                post:postE
            });
            console.log(arr);
        }
    </script>
</body>
</html>